// components/run-chart/run-chart.js
import chart_data from '../../libs/data_covid'

Component({
  properties: {},
  data: {},
  methods: {
    //初始化LineChart
    initLineChart(lineData) {
      // console.log(lineData)
      this.chartComponent = this.selectComponent('#line-chart');
      this.chartComponent.init((canvas, width, height, F2) => {
        //此处data数据可通过 异步获取数据
        const chart = new F2.Chart({
          el: canvas,
          width,
          height,
          animate: true,
          appendPadding: [17, 15, 15, 15]
        });
        const dataArr = this.dealLineData(lineData)
        var line_data = dataArr[0],
          tickCount = dataArr[1],
          stepItem = dataArr[2]
        this.initLineData(chart, line_data, tickCount)
        this.initLinePoint(chart)
        this.initToolTip(chart)
        this.initLegend(chart)
        chart.render();
        this.setDefaultToolTip(chart, stepItem)
        return chart;
      })
    },
    dealLineData(lineData) {
      let maxStep = Math.max.apply(Math, lineData.map(item => {
        return item.step
      }))
      let stepItem = {}
      // console.log(maxStep)
      lineData.forEach(stepObj => {
        let date = new Date(parseInt(stepObj.timestamp) * 1000)
        date = date.toFormat("MM.dd")
        // console.log(date)
        stepObj.date = date
        //判断当前值是最大值的时候取出来
        if (stepObj.step == maxStep) {
          stepItem = stepObj
        }
      })
      return [lineData, 6, stepItem]
    },
    //设置数据
    initLineData(chart, line_data, tickCount) {
      // chart.interaction('pan');
      chart.source(line_data, {
        date: {
          tickCount: tickCount
        }
      });
      // 坐标轴文本旋转
      chart.axis('date', {
        label: {
          rotate: -Math.PI / 4,
          textAlign: 'end',
          textBaseline: 'middle'
        }
      });
    },
    //设置线条和点
    initLinePoint(chart, colorMap) {
      chart.area().position('date*step').color('l(0) 0:#EB0000 0.5:#95008A 1:#3300FC').adjust('stack');
      chart.line().position('date*step').color('l(0) 0:#EB0000 0.5:#95008A 1:#3300FC').shape('smooth').style({
        lineWidth: 2,
      });
      // chart.point().position('date*step').color("#a27ef9").shape('smooth').style({
      //   lineWidth: 0.5,
      //   stroke: '#fff'
      // });
    },
    //设置提示文本
    initToolTip(chart) {
      chart.tooltip({
        showTitle: false,
        offsetY: 30,
        showCrosshairs: true, //是否显示辅助线
        showItemMarker: false, //显示图例里面的颜色
        showTooltipMarker: false, //没看到效果
        background: {
          radius: 3,
          fill: 'gray',
          padding: [3, 5]
        },
        titleStyle: {
          fontSize: 13,
          fill: '#fff',
          textAlign: 'start',
          textBaseline: 'top'
        },
        onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].title;
          items[0].value = items[0].value + "步"
          console.log("onShow", ev)
        }
      });
    },
    //设置图例
    initLegend(chart) {
      chart.legend({
        position: 'top',
        align: 'right',
        itemWidth: null // 图例项按照实际宽度渲染
      });
    },
    //设置默认选中提示文本
    setDefaultToolTip(chart, stepItem) {
      // 要展示 tooltip 的数据
      const point = chart.getPosition(stepItem);
      chart.showTooltip(point); // 展示该点的 tooltip
    }
  }
})
Date.prototype.toFormat = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1,
    'd+': this.getDate(),
    'H+': this.getHours(),
    'm+': this.getMinutes(),
    's+': this.getSeconds(),
    'S+': this.getMilliseconds()
  };
  //因为date.getFullYear()出来的结果是number类型的,所以为了让结果变成字符串型，下面有两种方法：
  if (/(y+)/.test(fmt)) {
    //第一种：利用字符串连接符“+”给date.getFullYear()+''，加一个空字符串便可以将number类型转换成字符串。
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      //第二种：使用String()类型进行强制数据类型转换String(date.getFullYear())，这种更容易理解。
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(String(o[k]).length)));
    }
  }
  return fmt;
};